<template>
  <el-row class="searchFactory">
    <div style="padding-top: 10px">订单编号</div>
    <el-input
      class="factoryInput"
      v-model="orderCode"
      style="width: 15%"
    ></el-input>
    <el-button class="searchBtn" @click="search()">查询</el-button>
    <el-button class="resetBtn" @click="reset()">重置</el-button>
  </el-row>
  <el-row class="formCard">
    <el-table :data="tableData" style="width: 100%">
      <el-table-column label="序号" width="50">
        <template #default="scope">
          <span style="margin-left: 10px">{{ scope.row.id }}</span>
        </template>
      </el-table-column>
      <el-table-column label="订单编号" width="180">
        <template #default="scope">
          <span>{{ scope.row.code }}</span>
        </template>
      </el-table-column>
      <el-table-column label="产品名称" width="100">
        <template #default="scope">
          <span>{{ scope.row.proName }}</span>
        </template>
      </el-table-column>
      <el-table-column label="订购数量" width="80">
        <template #default="scope">
          <span>{{ scope.row.amount }}</span>
        </template>
      </el-table-column>
      <el-table-column label="交付日期" width="170">
        <template #default="scope">
          <span>{{ scope.row.handInDate }}</span>
        </template>
      </el-table-column>
      <el-table-column label="投标截止日期" width="170">
        <template #default="scope">
          <span>{{ scope.row.deadline }}</span>
        </template>
      </el-table-column>
      <el-table-column label="收货人" width="120">
        <template #default="scope">
          <span>{{ scope.row.receiver }}</span>
        </template>
      </el-table-column>
      <el-table-column label="收货人联系方式" width="200">
        <template #default="scope">
          <span>{{ scope.row.phone }}</span>
        </template>
      </el-table-column>
      <el-table-column label="收货地址" width="150">
        <template #default="scope">
          <span>{{ scope.row.address }}</span>
        </template>
      </el-table-column>
      <el-table-column label="订单状态" width="80">
        <template #default="scope">
          <span>{{ scope.row.factoryState }}</span>
        </template>
      </el-table-column>
      <el-table-column label="是否中标" width="80">
        <template #default="scope">
          <span>{{ scope.row.isChosen }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template #default="scope">
          <el-button
            size="mini"
            @click="putBid(scope.row)"
            v-show="scope.row.factoryState == '未投标'"
            >投标</el-button
          >
          <el-button
            size="mini"
            @click="paichanClick(scope.row)"
            v-show="scope.row.isChosen == '已中标'  && scope.row.factoryState == '投标结束'"
            type="primary"
            >排产</el-button
          >
          <el-button
            size="mini"
            @click="wangongClick(scope.row)"
            v-show="scope.row.isChosen == '已中标' && scope.row.factoryState == '投标结束'"
            type="warning"
            >完工</el-button
          >
          <el-button
            size="mini"
            @click="fahuoClick(scope.row)"
            v-show="scope.row.isChosen == '已中标'  &&scope.row.factoryState == '已完工' "
            type="info"
            >发货</el-button
          >
          <el-button
            size="mini"
            @click="finishClick(scope.row)"
            v-show="scope.row.isChosen == '已中标'  &&scope.row.factoryState == '已收货'"
            >完成</el-button
          >
        </template>
      </el-table-column>
    </el-table>
  </el-row>

  <!-- 排产弹窗 -->
  <el-dialog title="排产" v-model="arrangeFormVisible">
    <el-row>
      <el-button
        type="success"
        @click="newArrange()"
        style="margin-bottom: 15px"
        >+添加生产设备</el-button
      >
    </el-row>
    <el-row>
      <el-col v-for="a in arranges" :key="a.equip" style="margin-bottom: 15px">
        <span>设备名称</span>
        <el-select
          v-model="a.equip"
          style="padding-left: 10px; padding-right: 10px; width: 120px"
        >
          <el-option
            v-for="e in equips"
            :key="e.name"
            :label="e.name"
            :value="e.name"
          >
          </el-option>
        </el-select>
        <span>开始时间</span>
        <el-date-picker
          v-model="a.startDate"
          type="date"
          placeholder="选择日期"
          style="margin-left: 10px; margin-right: 10px"
        >
        </el-date-picker>
        <span>结束时间</span>
        <el-date-picker
          v-model="a.endDate"
          type="date"
          placeholder="选择日期"
          style="margin-left: 10px; margin-right: 10px"
        >
        </el-date-picker>
        <el-button type="danger" @click="deleteArrange(a.id)">删除</el-button>
      </el-col>
    </el-row>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="arrangeFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="arrangeFormVisible = false"
          >确 定</el-button
        >
      </span>
    </template>
  </el-dialog>

  <!-- 投标弹窗 -->
  <el-dialog title="投标价格" v-model="bidVisible" width="30%">
    <el-row>
      <el-input v-model="bidPrice"></el-input>
      <span style="padding-top: 10px">万元</span>
    </el-row>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="bidVisible = false">取 消</el-button>
        <el-button type="primary" @click="confirmBid()">确 定</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script>
import axios from 'axios'
import { ElMessage } from 'element-plus'
export default {
  name: 'factoryOrderManage',
  data() {
    return {
      arrangeFormVisible: false,
      bidVisible: false,
      selectOrder: {},
      bidPrice: '',
      orderCode: '',
      tableData: [],
      newTable: [],
      arranges: [
        {
          id: '1',
          equip: '',
          startDate: '',
          endDate: '',
        },
      ],
      equips: [{}],
    }
  },
  mounted() {
    this.getOrder()
    this.getEquip()
  },
  methods: {
    getOrder() {
      console.log(this.$store.state.user)
      axios
        .get('/order/listFactoryOrder')
        .then((res) => {
          // this.tableData = res.data.data
          for (let i = 0; i < res.data.data.length; i++) {
            var newOrder = {
              id: '',
              code: '',
              proName: '',
              detail: '',
              amount: '',
              handInDate: '',
              deadline: '',
              receiver: '',
              phone: '',
              address: '',
              factoryState: '',
              isChosen: '',
            }
            newOrder.id = res.data.data[i].id
            newOrder.code = res.data.data[i].code
            newOrder.proName = res.data.data[i].proName
            newOrder.detail = res.data.data[i].detail
            newOrder.amount = res.data.data[i].amount
            newOrder.handInDate = res.data.data[i].handInDate
            newOrder.deadline = res.data.data[i].deadline
            newOrder.receiver = res.data.data[i].receiver
            newOrder.phone = res.data.data[i].phone
            newOrder.address = res.data.data[i].address
            newOrder.factoryState = res.data.data[i].factoryState
            if (
              this.$store.state.user.account === res.data.data[i].factoryAccount
            ) {
              newOrder.isChosen = '已中标'
            } else {
              newOrder.isChosen = '未中标'
            }

            this.tableData.push(newOrder)
          }
        })
        .catch((err) => {
          console.error(err)
        })
    },
    getEquip() {
      axios
        .post('/equip/findAllEquip', this.$store.state.user)
        .then((res) => {
          console.log(res.data.data)
          this.equips = res.data.data
        })
        .catch((err) => {
          console.error(err)
        })
    },
    paichanClick(o) {
      this.arrangeFormVisible = true
    },
    wangongClick(o) {
      this.selectOrder = o
      axios
        .post('/order/modifyState', {
          id: this.selectOrder.id,
          orderStateForCustomer: '已完工',
          orderStateForFactory: '已完工',
        })
        .then((res) => {
          var m = res.data.message
          console.log(res)
          o.factoryState = '已完工'
          if (res.data.code == 200) {
            cosole.log(res.data.message)
          } else {
            ElMessage.error(m)
          }
        })
    },
    fahuoClick(o) {
      this.selectOrder = o
      axios
        .post('/order/modifyState', {
          id: this.selectOrder.id,
          orderStateForCustomer: '已发货',
          orderStateForFactory: '已发货',
        })
        .then((res) => {
          var m = res.data.message
          console.log(res)
          o.factoryState = '已发货'
          if (res.data.code == 200) {
            cosole.log(res.data.message)
          } else {
            ElMessage.error(m)
          }
        })
    },
    finishClick(o) {
      this.selectOrder = o
      axios
        .post('/order/modifyState', {
          id: this.selectOrder.id,
          orderStateForCustomer: '已完成',
          orderStateForFactory: '已完成',
        })
        .then((res) => {
          var m = res.data.message
          console.log(res)
          o.factoryState = '已完成'
          if (res.data.code == 200) {
            console.log(res.data.message)
          } else {
            ElMessage.error(m)
          }
        })
    },
    newArrange() {
      //添加排产行
      this.arranges.push({
        id: '',
        equip: '',
        startDate: '',
        endDate: '',
      })
    },
    deleteArrange(num) {
      let deleteIndex = objArr.findIndex((item) => item.id === num)
      objArr.splice(deleteIndex, 1)
    },
    putBid(o) {
      this.bidVisible = true
      this.selectOrder = o
    },
    confirmBid() {
      axios
        .post('/order/putBid', {
          orderId: this.selectOrder.id,
          factoryAccount: this.$store.state.user.account,
          bidPrice: this.bidPrice,
          bidState: '未中标',
        })
        .then((res) => {
          this.selectOrder.factoryState = '已投标'
          ElMessage.success({
            message: res.data.message,
            type: 'success',
          })
        })
      this.bidVisible = false
    },
    search() {
      this.newTable = this.tableData
      this.tableData = this.newTable.filter((val) => val.code == this.orderCode)
    },
    reset() {
      this.getOrder()
      this.orderCode = ''
    },
  },
}
</script>

<style lang="less" scoped>
.el-input {
  width: 10rem;
  padding: 0 30px 30px 30px;
  font-size: 1.2em;
}
.el-button {
  height: 10px;
}
.addBtn {
  background-image: linear-gradient(120deg, #f6d365 0%, #fda085 100%);
  font-weight: bold;
}
</style>
